<template>
  <div class="page-container">
    <!-- 侧边栏 -->
    <el-container>
      <SidebarMenu
        @goToRoleManagement="goToRoleManagement"
        @goToMenuManagement="goToMenuManagement"
        @goToPermissionControl="goToPermissionControl"
        @goToSystemSetting="goToSystemSetting"
      />

      <el-container>
        <el-header>
          <div class="navbar">
            <div class="navbar-tags">
              <el-tag type="primary" effect="dark" class="navbar-tag">首页</el-tag>
            </div>
            <img :src="currentAvatar" alt="头像" class="navbar-avatar" @click="switchAvatar" />
          </div>
        </el-header>
        <el-main>


          <!-- 查询表单 -->
          <el-card class="query-card" shadow="never">
            <el-form :inline="true" :model="queryForm">
              <el-form-item label="菜单名称">
                <el-input v-model="queryForm.menuName" placeholder="菜单名称" />
              </el-form-item>
              <el-form-item label="菜单路径">
                <el-input v-model="queryForm.menuPath" placeholder="菜单路径" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onQuery">查询</el-button>
              </el-form-item>
            </el-form>
          </el-card>

          <!-- 操作按钮 -->
          <el-button type="danger" icon="el-icon-delete" style="margin: 16px 0;">删除</el-button>

          <!-- 表格 -->
          <el-table :data="tableData" border style="width: 100%; margin-bottom: 16px;">
            <el-table-column prop="role" label="角色" />
            <el-table-column prop="roleName" label="角色名称" />
            <el-table-column prop="action" label="操作" />
            <el-table-column prop="delete" label="删除" />
          </el-table>

          <!-- 分页 -->
          <el-pagination
            background
            layout="prev, pager, next"
            :total="50"
            :page-size="10"
            :current-page="2"
            style="text-align: right;"
          />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import SidebarMenu from './SidebarMenu.vue';

function goToSystemSetting() {
  router.push('/system');
}
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

function goToRoleManagement() {
  router.push('/RoleManagement');
}

function goToMenuManagement() {
  router.push('/MenuManagement');
}

const queryForm = ref({
  menuName: '',
  menuPath: ''
});

const tableData = ref([
  { role: '权限', roleName: '角色描述', action: '创建', delete: '角色列表' },
  { role: '角色列表', roleName: '权限列表', action: '编辑', delete: '角色名称' },
  { role: '角色名称', roleName: '创建时间', action: '删除', delete: '角色描述' },
  { role: '角色描述', roleName: '修改时间', action: '角色列表', delete: '权限列表' },
  { role: '权限列表', roleName: '操作', action: '角色名称', delete: '操作' },
  { role: '创建角色', roleName: '状态', action: '角色描述', delete: '编辑' },
  { role: '编辑角色', roleName: '角色列表', action: '权限列表', delete: '删除' },
  { role: '删除角色', roleName: '角色名称', action: '操作', delete: '分配' },
  { role: '分配权限', roleName: '角色描述', action: '创建', delete: '角色列表' },
  { role: '角色编号', roleName: '权限列表', action: '编辑', delete: '角色信息' }
]);

function onQuery() {
  // 查询逻辑
}
</script>

<style scoped>
.page-container {
  height: 100vh;
  background: #f7f9fa;
}
.sidebar {
  background: #fff;
  min-height: 100vh;
  border-right: 1px solid #eee;
}
.header {
  background: #fff;
  border-bottom: 1px solid #eee;
  padding: 16px;
}
.title {
  font-size: 22px;
  font-weight: bold;
}
.query-card {
  margin: 20px 0 10px 0;
  background: #f8fafd;
}
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 56px;
  background: linear-gradient(90deg, #f5f7fa 0%, #c3cfe2 100%);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
  padding: 0 32px;
  margin-bottom: 18px;
}
.navbar-tags {
  display: flex;
  align-items: center;
}
.navbar-tag {
  margin-right: 12px;
  font-size: 16px;
  padding: 0 16px;
  border-radius: 8px;
}
.navbar-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
  transition: box-shadow 0.2s, transform 0.2s;
}
.navbar-avatar:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  transform: scale(1.08);
}
</style>
